<template>
  <div class="main">
    <el-row type="flex" justify="space-around" style="margin-top:20px;">
      <el-col :span="24">
        <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
        <el-button type="primary" icon="el-icon-plus" @click="addNewSch">新建排期</el-button>
        <!-- <el-button type="primary" icon="el-icon-plus" v-else>编辑排期</el-button> -->
      </el-col>
    </el-row>
    <el-row style="margin-top:20px;">
      <el-table
        :data="preSchData"
        :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
        :fit="true"
        border
        style="width: 100%"
      >
        <el-table-column prop="get_media.name" label="媒体"></el-table-column>
        <el-table-column prop="get_resource.resources_name" label="资源"></el-table-column>
        <el-table-column label="上刊日期">
          <template slot-scope="scope">
            <span>{{transDate(JSON.parse(scope.row.cycle_range).start_time)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="原计划日期">
          <template slot-scope="scope">
            <span>{{transDate(JSON.parse(scope.row.cycle_range).end_time)}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="change_reason" label="变更原因"></el-table-column>
        <el-table-column label="状态">
          <template >
            <span>已提交</span>
            <!-- <span  >未提交</span>
           <span  >已通过</span>
            <span >未通过</span> -->
          </template>
        </el-table-column>

        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button @click="handleChange(scope.row)" type="text" size="small">变更</el-button>
            <el-button type="text" @click="handleDelete(scope.row)" size="small">删除</el-button>
            <el-button @click="handleLog(scope.row)" type="text" size="small">日志</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
   
    <el-dialog title="新建排期" destroy-on-close :visible.sync="showAdd" center width="60%">
      <addResource @statusChange='statusChange' @changeResource='changeResource'></addResource>
      <span slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="postSch">提 交</el-button>
        <el-button type="primary" @click="showAdd = false">删 除</el-button>
        <el-button type="primary" @click="showAdd = false">返 回</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新建排期" destroy-on-close :visible.sync="showAdd" center width="60%">
      <addResource @statusChange='statusChange' @changeResource='changeResource'></addResource>
      <span slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="postSch">提 交</el-button>
        <el-button type="primary" @click="showAdd = false">删 除</el-button>
        <el-button type="primary" @click="showAdd = false">返 回</el-button>
      </span>
    </el-dialog>

    <el-dialog title="变更日志" destroy-on-close :visible.sync="showLog" center width="60%">
      <el-table
        :data="changeLog"
        :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
        :fit="true"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="content" label="资源"></el-table-column>
        <el-table-column label="上刊日期">
          <!-- <template slot-scope="scope">
            <span>{{transDate(JSON.parse(scope.row.cycle_range).start_time)}}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="change_date" label="变更日期"></el-table-column>
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeSave">保 存</el-button>
        <el-button type="primary" @click="showLog = false">取 消</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import addResource from "./components/addResource.vue";
import changeResource from "./components/changeResource.vue";
import formatEveryDay from "../add_contract/components/timeFormat.js";
import { preScheduleList,addScheduleList,changeResouce,changeLog } from "../../api/Salesman.js";
export default {
  props: ["id"],
  components: {
    addResource,
    changeResource
  },
  data() {
    return {
      preSchData: [],
      showAdd: false,
      status: "1",
      resourceData:[],
      showChange:false,
      currentId:'',
      changeLog:[],
      showLog:false
    };
  },
  methods: {
    transDate(time){
      return moment.unix(time).format("YYYY-MM-DD")
    },
    getPreScheduleList() {
      preScheduleList(this.$route.query.id).then(res => {
        if (res.code == 200) {
          this.preSchData = res.data;
        } else {
          this.preSchData = null;
          this.$message.error("获取预排期资源失败");
        }
      });
    },
    statusChange(data){
      this.status = data
    },
    changeResource(data){
      this.resourceData = data
    },
    handleChange(data) {
      this.currentId= data.id
      this.showChange = true
    },
    changeSave(){
      
      let data = this.$refs.changeBox.get_resources
      if (data.player_date == '') {
        this.$message.error('请填写播放时间')
      }else if (data.often == '') {
        this.$message.error('请选择时长')
      }else if (data.id == '') {
        this.$message.error('请选择资源')
      }else{
        let obj = {
            player_date:JSON.stringify({
              type: 1,
              val: formatEveryDay(data.player_date[0], data.player_date[1])
            }),
          cycle_range:JSON.stringify({
            start_time: moment(data.player_date[0]).unix(),
            end_time: moment(data.player_date[1]).unix()
          }),
          often:data.often,
          medium_public_id:data.id,
          change_reason:data.remark
        }
        changeResouce(this.currentId,obj).then(res=>{
          if (res.code == 200) {
            this.$message.success('变更成功')
            this.currentId = ''
            this.showChange = false
          }else{
            this.$message.error('变更失败')
          }
        })
      }
      
    },
    handleDelete(data) {},
    handleLog(data) {
      changeLog(data.id).then(res=>{
        if (res.code == 200) {
          if (!res.data || res.data == []) {
            this.$message.error('无变更日志')
            
          }else{
            this.changeLog = res.data
            this.showLog = true
          }
        }else{
          this.$message.error('获取日志失败')
        }
      })
    },
    addNewSch() {
      this.showAdd = true;
    },
    postSch(){
      let data = {
        medium:[],
        product:[],
        status:this.status
      }

      this.resourceData.forEach(e=>{
        let obj = {
          id:e.id,
          often:e.often,
          second:e.second,
          expenses:e.expenses,
          fees:e.fees,
          remark:e.remark,
          gift:e.gift || e.gift == 1 ? 1 : 0,
          cost_type:e.cost_type,
          player_date:JSON.stringify({
              type: 1,
              val: formatEveryDay(e.player_date[0], e.player_date[1])
            }),
          cycle_range:JSON.stringify({
            start_time: moment(e.player_date[0]).unix(),
            end_time: moment(e.player_date[1]).unix()
          })
        }
        data.medium.push(obj)
      })
      addScheduleList(this.$route.query.id,data).then(res=>{
        if (res.code == 200) {
          this.$message.success('添加成功')
          this.showAdd = false
          this.getPreScheduleList();
        }else{
          this.$message.success('添加失败')
        }
      })
    }
  },
  mounted() {
    this.getPreScheduleList();
  }
};
</script>

<style scoped='scoped' lang='scss'>
.main {
  width: 100%;
  height: 100%;
}
</style>